<!--
 * @Author: your name
 * @Date: 2021-12-27 09:15:01
 * @LastEditTime: 2022-05-10 09:28:13
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: \cloudServiceStatic\src\components\CommonForm\CommonBox.vue
-->
<template>
  <div class="box">
     <div class="box-header" v-if="title" :class="{'borderBottom':hasBtn?true:false}">
       <div class="box-left">
         <span class="box-left-title">{{title}}</span>
         <div v-if="hasExpandBtn">
           <span class="pack-up" v-if="isOpen" @click="expand(0)">收起</span>
          <span class="open" v-else @click="expand(1)">展开</span>
         </div>
       </div>
        <div class="box-right" v-if="hasBtn">
          <el-button @click="cancel">取消</el-button>
          <el-button @click="save" type="primary">保存</el-button>
        </div>
     </div>
     <div class="box-content" v-show="isOpen">
         <slot></slot>
     </div>

  </div>

</template>

<script>
export default {
  props: {
    title: {
      type: String
    },
    hasBtn:{
      type:Boolean,
      default:true,
    },
    hasExpandBtn:{
      type:Boolean,
      default:false
    }
  },
  data(){
    return {
     isOpen:true
    }
  },
  methods: {
    cancel() {
       this.$multiTab.closeCurrentPage()
    },
    save() {
      this.$emit('save')
    },
    //收起/展开
    expand(value){
      if(value===0){
      this.isOpen = false
      }else{
        this.isOpen = true
      }
    }
  }

}
</script>

<style lang="scss" scoped>
.box{
  background: #ffffff;
}
.box-header{
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0 0 5px;
  .box-left{
    width: 100%;
    display: flex;
    justify-content: space-between;
    .box-left-title{
  
    font-size: 18px;
    font-weight: bold;
    color: #333;
    }
    .pack-up,.open{
      color: #169BD5;
     cursor: pointer;
    }
}
}
.borderBottom{
    border-bottom: 1px solid rgba(215, 215, 215, 1);
}
.box-content{
 padding: 0 20px 20px 20px;
}

</style>
